<template>
  <div class="left-two" :style="{ height: height + 'px' }">
    <out-line :height="height">
      <div>
        <div class="module-title">
          <div class="left">
            <div class="text">机构数据</div>
            <!-- <img class="pic" src="@/assets/images/mtitle.png" /> -->
          </div>
          <div class="tab-titles">
            <div v-for="(tab, index) in tabs" :key="index" :class="{'active': activeTab === index}" @click="changeTab(index)">
              {{ tab.title }}
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div v-show="activeTab === 0">
            <ul class="list">
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate1.png" alt="养老院">
                  <span>养老院</span>
                </div>
                <div class="quantity">10</div>
              </li>
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate2.png" alt="日间照料中心">
                  <span>日间照料中心</span>
                </div>
                <div class="quantity">20</div>
              </li>
              <li>
                <div class="title">
                  <img class="title-icon" src="@/assets/images/blocate3.png" alt="社区服务中心">
                  <span>社区服务中心</span>
                </div>
                <div class="quantity">30</div>
              </li>
            </ul>
          </div>
          <div v-show="activeTab === 1">
            <barChart1 v-if="activeTab === 1"></barChart1>
            <!-- 柱状图内容 -->
          </div>
          <div v-show="activeTab === 2">
            <!-- 饼状图内容 -->
            <pieChart1 v-if="activeTab === 2" class="mt15"></pieChart1>
          </div>
        </div>
      </div>
    </out-line>
  </div>
</template>

<script>
import { getOrgChartData } from "@/api/pcs/index"
export default {
  props: {
    height: {
      type: Number,
      required: true
    }
  },
  components: {
    pieChart1: () => import('@/components/koi/left/pieChart1.vue'),
    barChart1: () => import('@/components/koi/left/barChart1.vue'),
  },
  created() {
    this.getOrgChartData()
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '数据' },
        { title: '柱状图' },
        { title: '饼状图' }
      ]
    };
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
    },
    getOrgChartData() {
      getOrgChartData().then((res) => {
        if (res.code === 2000) {
          // this.oldTotal = res.data[0].value + res.data[1].value + res.data[2].value || 0
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>
<style lang="less" scoped>
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

.list li {
  display: flex;
  align-items: center;
  padding: 10px;
}

.list li:nth-child(even) {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.list li:hover {
  background-color: #006afb;
  opacity: 1;
}

.title {
  display: flex;
  align-items: center;
}

.title img {
  margin-right: 10px;
  width: 15px;
}

.quantity {
  margin-left: auto;
}
@media screen and (max-width: 1026px) {
  .title {
    font-size: 14px;
  }
}
</style>


